<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统设置</el-breadcrumb-item>
				<el-breadcrumb-item>店铺设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="店铺LOGO">
								<dt-upload v-model="model.avatar"></dt-upload>
							</el-form-item>
							<el-form-item label="营业执照">
								<dt-upload v-model="model.certUrl"></dt-upload>
							</el-form-item>
							<el-form-item prop="categoryId" label="商户类别">
								<el-select v-model="model.categoryId" :disabled="model.isLock==0" placeholder="请选择...">
									<el-option v-for="item in categoryList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="storeId" label="店铺类型">
								<el-select v-model="model.storeId" :disabled="model.isLock==0" placeholder="请选择...">
									<el-option v-for="item in storeList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="title" label="店铺名称">
								<el-input v-model="model.title" placeholder="请输入店铺名称"></el-input>
							</el-form-item>
							<el-form-item label="店主姓名">
								<el-input v-model="model.realName" placeholder="非必填，可空"></el-input>
							</el-form-item>
							<el-form-item prop="mobile" label="手机号码">
								<el-input v-model="model.mobile" placeholder="非必填，商户的联系电话"></el-input>
							</el-form-item>
							<el-form-item label="店铺地址">
								<el-input :maxlength="512" v-model="model.address" placeholder="非必填，店铺详细地址"></el-input>
							</el-form-item>
							<el-form-item prop="intro" label="店铺介绍">
								<el-input type="textarea" :row="3" v-model="model.intro" show-word-limit :maxlength="512"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="账户信息" name="store">
						<div class="tab-content">
							<el-form-item label="账户状态">
								<span v-if="model.isLock==0">正常</span>
								<span v-if="model.isLock==1">待审核</span>
								<span v-if="model.isLock==2">审核失败</span>
							</el-form-item>
							<el-form-item label="交易费">
								{{model.tradeFee}} %
							</el-form-item>
							<el-form-item label="账户余额" v-if="model.id>0">
								{{model.amount}} 元
							</el-form-item>
							<el-form-item label="不可用余额" v-if="model.id>0">
								{{model.frozenAmount}} 元
							</el-form-item>
							<el-form-item label="评价总数" v-if="model.id>0">
								{{model.evaluateCount}} 次
							</el-form-item>
							<el-form-item label="收藏总数" v-if="model.id>0">
								{{model.favoriteCount}} 位
							</el-form-item>
							<el-form-item label="申请时间" v-if="model.id>0">
								{{model.addTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				categoryList: [], //商户类别
				storeList: [], //店铺类型
				model: {
					id: 0,
					userId: null,
					categoryId: null,
					storeId: null,
					title: null,
					address: null,
					mobile: null,
					avatar: null,
					realName: null,
					certUrl: null,
					intro: null,
					tradeFee: 5,
					amount: 0,
					frozenAmount: 0,
					isSelf: 0,
					isRecom: 0,
					isAudit: 1,
					isLock: 0,
					sortId: 99,
					addTime: null,
				},
				rules: {
					categoryId: [
						{ required: true, message: '请选择商户类别', trigger: 'change' }
					],
					storeId: [
						{ required: true, message: '请选择店铺类型', trigger: 'change' }
					],
					title: [
						{ required: true, message: '请输入店铺名称', trigger: 'blur' },
					],
					mobile: [
						{ pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				_this.$api.request({
					url: '/merchant',
					loading: true,
					success(res) {
						//赋值给model
						Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
					}
				});
				//加载商户类别列表
				_this.$api.request({
					url: '/client/merchant/category/view/0',
					success(res) {
						_this.categoryList = res.data;
					}
				});
				//加载店铺类型列表
				_this.$api.request({
					url: '/client/merchant/store/view/0',
					success(res) {
						_this.storeList = res.data;
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单
					_this.$api.request({
						method: 'put',
						url: '/merchant',
						data: _this.model,
						successMsg: '修改店铺已成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) { },
						complete() {
							_this.loading = false
						}
					});
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>